Video H5相关问题

发表于 | 更新于: | 分类于 ， | 阅读次数:
字数统计: 4,375 | 阅读时长 ≈ 17

2020. 星期 ：

TBS-x5

腾讯浏览服务是致力于优化移动端webview体验的整套解决方案。
该方案由SDK、手机QQ浏览器X5内核和X5云端服务组成，解决移动端webview使用过程中出现的一切问题，优化用户的浏览体验。同时，腾讯还将持续提供后续的更新和优化，为开发者提供最新最优秀的功能和服务。

TBS开发指引-视频: https://x5.tencent.com/docs/video.html
1 X5内核视频两种播放形态
1.1 页面内播放
X5内核视频在用户点击后默认会进入全屏播放，前端可以设置video的x5-playsinline属性来将视频限定于网页内部播放

1.2 同层页面内播放
同层页面内播放是标准的视频播放形态，在video标签中添加且只需要添加一个(不要与x5-playsinline同时存在):x5-video-player-type=’h5-page’属性来控制网页内部同层播放，可以在视频上方显示html元素

X5内核视频四种播放形态

(1) 全屏播放
X5内核视频默认播放形态，用户点击视频区域后开始进入全屏播放，视频区域内的所有事件行为会由X5内核视频组件全权托管。视频层级最高，会遮挡所在区域所有html元素。（仅使用于安卓微信、手机QQ等非安卓QQ浏览器的X5内核场景）

https://yongling8808.github.io/test/video_demo/video.html

(2) 页面内播放
X5内核视频在用户点击后默认会进入全屏播放，前端可以设置video的x5-playsinline属性来将视频限定于网页内部播放

https://yongling8808.github.io/test/video/video_inpage_playsinline.html

(3) 同层页面内播放
同层页面内播放是标准的视频播放形态，在video标签中添加x5-video-player-type：h5-page属性来控制网页内部同层播放，可以在视频上方显示html元素。

https://tencentx5.github.io/x5/video_page_samelayer.htm

X5内核视频事件

(1) 进入、退出全屏通知
可以通过＊＊x5videoenterfullscreen、x5videoexitfullscreen来＊＊视频进入和退出全屏通知。

https://yongling8808.github.io/test/video_demo/video_fullscreen_event.html

(2) 扩展通知
X5内核视频额外参数，每秒触发一次，让前端通过参数分析决定是否换视频源来保证用户的播放体验。

https://res.imtt.qq.com/qqbrowser_x5/h5/samples/video/video_extrainfo.html

X5内核视频反馈问答

(1) Q:X5内核视频可以实现自动播放吗？
A:X5内核作为webview，具备自动播放能力，但这能力的控制权交由TBS宿主控制（安卓微信、手机QQ、QQ浏览器及其它第三方接入），宿主可以通过webview settings的setVideoPlaybackRequiresUserGresture来决定是否允许前端页面实现自动播放。目前安卓QQ浏览器允许wifi下自动播放、手机QQ允许自动播放、微信不允许自动播放。

https://yongling8808.github.io/test/video/video_autoplay.html

(2) Q:X5内核视频为什么有时使用js调用video.play() 无法播放？
A:X5内核自TBS3.8及以后在事件处理这块跟移动端标准对齐，只有用户点击视频或者用户点击操作的时间周期内js调用了video.play()才可以正常播放。

https://yongling8808.github.io/test/video_demo/video_gesture.html

(3) Q:X5内核视频播放会触发页面元素的onblur吗？
A:目前X5内核的视频播放使用跟当前webview同级别的view来展示，视频播放时会抢占webview的焦点势必会导致页面内焦点丢失。

(4) Q:在X5内核上使用js调用video的seek方法怎么会出现seek位置跟传入的参数不符？
A:X5内核中的视频播放器是提供seek能力的，但seek的最终位置是前端传入的时间参数向已播放的方向的第一个关键帧。所以会出现seek位置不准，这个跟具体的视频源由一定关系。

(5) Q:X5内核竖屏播放视频时，横置手机会自动切到横屏全屏播放，但再竖屏时，视频为什么无法切回来？
A:这个是产品策略，需要用户点击全屏上的返回按钮后返回到竖屏。

(6) Q:使用X5内核打开A页面播放视频后暂停，再点击A页面跳转到B页面，再从B页面当用户发生点击行为时使用js的history.goback到A页面，A页面视频一定概率会自动播放。
A:这个是X5内核前进后退重新恢复A页面视频播放通路遗留问题，页面前端可以将js的history.goback 调用跟用户点击行为的时机错开，比如在用户click时间中延时100ms再去调用history.goback可以临时解决该问题。

(7) Q:X5内核支持多个视频同时播放吗？
A:不支持。

(8) Q:X5内核支持MSE吗？
A:X5内核MSE正在支持中，预计TBS44200版本及以后，QQ浏览器8.6版本及以后支持。

(9)Q:接入X5内核后，webview的onLoadResource为什么接收不到H5页面video标签的视频url地址？如何获取视频链接？
A:X5内核视频播放使用X5内核视频sdk，视频资源通过sdk拉取，独立于X5webview，所以不会有onLoadResource通知，但可以通过webview接口注入js获取video标签的url属性。

(10)Q:视频盖住了网页其他标签。
A:同层全屏形态时不会盖住；native形态播放器是处于顶层的独立view会遮盖视频区域的其它元素。

(11)Q:x5内核video的currentTime赋值后无效。
A:只有视频开始播放后设置的currentTime才有效。

(12)Q:Video标签转Canvas会有卡顿。
A:X5内核基于安全策略，对获取摄像头数据后在canvas上的绘制做了限制。

(13)Q:视频播放控件支持自定义吗？
A:同层全屏形态下的控件前端可以自定义，native形态不支持自定义。

(14)Q:X5内核的视频播放支持字幕功能吗？
A:不支持。

(15)Q:X5内核视频播放支持自签ssl证书的视频吗？
A:不支持。

(16)Q:X5内核视频支持playbackRate倍速播放吗？
A:不支持。

(17)Q:X5内核视频支持与音频同时播放吗？
A:不支持。

各属性说明

webkit-playsinline && playsinline=”true”

小窗播放 使视频不脱离文本流，但是需要webview（allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES），现在结果是苹果支持，安卓不支持。安卓播放会全屏。

x-webkit-airplay=”allow”
允许airplay（通过AirPlay可以把当前的视频投放到支持此技术的其他设备上。）

x5-video-player-type=”h5”
通过video属性“x5-video-player-type”声明启用同层H5播放器
x5-video-player-type支持的值类型：h5
这个属性需要在播放前设置好，播放之后设置无效

x5-video-player-fullscreen=”true”
视频播放时将会进入到全屏模式，如果不申明此属性，页面得到视口区域为原始视口大小(视频未播放前)，比如在微信里，会有一个常驻的标题栏，如果不声明此属性，这个标题栏高度不会给页面，播放时会平均分为两块（上下黑块）
注： 声明此属性，需要页面自己重新适配新的视口大小变化。可以通过监听resize 事件来实现
window.onresize = function(){
test_video.style.width = window.innerWidth + “px”;
test_video.style.height = window.innerHeight + “px”;
}

x5-video-orientation控制横竖屏
声明播放器支持方向
可选值： landscape 横屏，portrain竖屏； 默认portrain
跟随手机自动旋转

SMTC

1
2
3
4
5
6
7
8
9
<video 
    x5-video-player-fullscreen="false"
    x5-video-orientation="portrait"
    x-webkit-airplay="true"
    x5-video-player-type="h5-page"
    x5-playsinline="true"
    webkit-playsinline
    playsinline="true"
/>

|——————

webkit-playsinline和playsinline: 视频播放时局域播放，不脱离文档流 。
但是这个属性比较特别， 需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。换句话说，如果APP不设置，你页面中加了这标签也无效，这也就是为什么安卓手机WeChat 播放视频总是全屏，因为APP不支持playsinline，而ISO的WeChat却支持。
这里就要补充下，如果是想做全屏直播或者全屏H5体验的用户，IOS需要设置删除 webkit-playsinline 标签，因为你设置 false 是不支持的 ，安卓则不需要，因为默认全屏。但这时候全屏是有播放控件的，无论你有没有设置control。 做直播的可能用得着播放控件，但是全屏H5是不需要的，那么去除全屏播放时候的控件，需要以下设置：同层播放

x5-video-player-type: 启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放，播放的时候看似全屏，但是已经除去了control和微信的导航栏，只留下”X”和”<”两键。目前的同层播放器只在Android（包括微信）上生效，暂时不支持iOS。至于为什么同层播放只对安卓开放，是因为安卓不能像ISO一样局域播放，默认的全屏会使得一些界面操作被阻拦，如果是全屏H5还好，但是做直播的话，诸如弹幕那样的功能就无法实现了，所以这时候同层播放的概念就解决了这个问题。不过在测试的过程中发现，不同版本的IOS和安卓效果略有不同

x5-video-player-type="h5"
移动端浏览器中的video元素是比较特别的，早期无论是在iOS还是Android的浏览器中，它都位于页面的最顶层，无法被遮挡。后来，这个问题在iOS下得到了解决。但是对Android的大部分浏览器来说，问题仍然存在。
X5是腾讯基于Webkit开发的浏览器内核，应用于Android端的微信、QQ、QQ浏览器等应用。它提供了一种名叫「同层播放器」的特殊video元素以解决遮挡问题。

x5­-video­-player­-fullscreen:全屏设置。它又两个属性值，ture和false，true支持全屏播放，false不支持全屏播放。其实，IOS 微信浏览器是Chrome的内核，相关的属性都支持，也是为什么X5同层播放不支持的原因。安卓微信浏览器是X5内核，一些属性标签比如playsinline就不支持，所以始终全屏。

x5-video-player-fullscreen
ios
ios加playsinline属性，之前只带webkit前缀的在ios10以后，会吊起系统自带播放器，两个属性都加上基本ios端都可以保证内敛到浏览器webview里面了。如果仍有个别版本的ios会吊起播放器，还可以引用一个库iphone-inline-video（具体用法很简单看它github，这里不介绍了，只需加js一句话，css加点），github地址加上playsinline webkit-playsinline这两个属性和这个库基本可以保证ios端没有问题了（不过亲测，只加这两个属性不引入库好像也是ok的，至今没有在ios端微信没有出现问题，如果你要兼容uc或者qq的浏览器建议带上这个库）.
android
x5-video-player-type=”h5”属性，腾讯x5内核系的android微信和手Q内置浏览器用的浏览器webview的内核，使用这个属性在微信中视频会有不同的表现，会呈现全屏状态，貌似播放控件剥去了，至少加了这个属性后视频上层可以有其他dom元素出现了（非腾讯白名单机制的一种处理措施）。

x5-video-orientation: 声明播放器支持的方向，可选值landscape 横屏, portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式

x-webkit-airplay=”allow” : 这个属性应该是使此视频支持ios的AirPlay功能。使用AirPlay可以直接从使用iOS的设备上的不同位置播放视频、音乐还有照片文件，也就是说通过AirPlay功能可以实现影音文件的无线播放，当然前提是播放的终端设备也要支持相应的功能

问题记录

层级问题

全屏

WebView 视频播放，全屏按钮显示不出来，全屏后不能播放视频

  1. 要打开硬件加速
    在AndroidMainfest.xml中，当前webView所在类的标签中添加 : android:hardwareAccelerated=”true”
  2. 设置 WebChromeClient ,并实现 onShowCustomView() 方法和onHideCustomView()方法。
  3. 要支持全屏

部分mp4文件在ios下无法播放的问题

发现主要压缩级别不同。
那又查看了苹果对不同的profile的支持情况
应该是level4级别的压缩级别兼容性不是很好。，转成3.2级别就可以播放了。

这次又对同相同转码级别下，分别进行逐行扫描和隔行扫描导出进行对比，发现逐行扫描可以播放，隔行扫描无法播放。

参考文档
1、https://developer.mozilla.org/zh-CN/docs/conflicting/Web/Media/Formats#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%83%85%E5%86%B5
2、https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html#//apple_ref/doc/uid/TP40008332-CH103-SW1
3、https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs#avc_h.264

iOS上Video的格式要求
文档：https://developer.apple.com/documentation/http_live_streaming/hls_authoring_specification_for_apple_devices#//apple_ref/doc/uid/DTS40009745-CH1-MEDIASTREAMSEGMENTATION

挑了几个容易出现兼容的点：
1.3a. For maximum compatibility, some H.264 variants SHOULD be less than or equal to High Profile, Level 4.1.
为了获得最大的兼容性，视频的压缩级别。最好不要超过 level 4.1

1.12. For backward compatibility, some video content SHOULD be encoded with H.264.
为了向后兼容，某些视频内容应使用H.264编码。

1.14. All interlaced source content MUST be deinterlaced.
不支持各行隔行扫描，需要转为逐行扫描

1.18. VOD content SHOULD use a natural frame rate for the content. Any of the following frame rates: 23.976, 24, 25, 29.97, 30, 50, 59.94, and 60 fps are supported.
帧速率在这几个之中

1.19. Frame rates above 60 fps SHALL NOT be used.
不得使用高于60 fps的帧速率

补充知识
帧速率:每秒播放帧的数量，单位是每秒多少帧，也就是fps。帧速率越高，视频越流畅。基本上，每秒24帧就很流畅了。不同格式的视频，帧速率不同，电影 23.98、PAL 25、NTSC 29.97、网络 30……帧速率是重要参数。
帧大小:帧（视频）的宽和高。宽和高用像素数量表示，一个像素可以理解为一个小方格。比如一段HD视频是1920*1080.
像素长宽比：每一个像素的长宽比，所以又叫长宽比。
场序：比较专业的一个概念，标清电视年代需要掌握，但是到高清逐行视频普及的今天用处已经不大。场分为高场（上场）、低场（下场）和无场。当视频的场序弄错的话，视频细节会产生大量的横纹，还有可能会抖动、模糊。所以，通常我会建立一个无场逐行的序列，最后也输出为无场，这样可以避免这一类的问题。

隔行扫描（interlaced scan）、逐行扫描（Progressive scanning）
如1080i 是一种高清晰度电视信号格式。其中，“1080”表示垂直方向有1080条水平扫描线，“i”表示采用交错式扫描视频显示方式（interlaced scan）。在播放时，它先扫描单数的垂直画面，再扫描双数的垂直画面，故只需要1080p一半的带宽。它的出现对电视产业的发展具有重要的影响。
1080p是一种视频显示格式，外语字母P意为逐行扫描（Progressive scanning）。有别于1080i的隔行扫描，每一条水平扫描线都同时表现在画面上，因此比隔行扫描电视更加的平滑。这是最高的高清标准。
采样率:一般不用去管的参数，48000 Hz和44100 Hz用的最多

H.264有四种画质级别
H.264有四种画质级别,分别是baseline, extended, main, high：
1、Baseline Profile：基本画质。支持I/P 帧，只支持无交错（Progressive）和CAVLC；
2、Extended profile：进阶画质。支持I/P/B/SP/SI 帧，只支持无交错（Progressive）和CAVLC；(用的少)
3、Main profile：主流画质。提供I/P/B 帧，支持无交错（Progressive）和交错（Interlaced）， 也支持CAVLC 和CABAC 的支持；
4、High profile：高级画质。在main Profile 的基础上增加了8x8内部预测、自定义量化、 无损视频编码和更多的YUV 格式；
　　H.264 Baseline profile、Extended profile和Main profile都是针对8位样本数据、4:2:0格式(YUV)的视频序列。在相同配置情况下，High profile（HP）可以比Main profile（MP）降低10%的码率。 根据应用领域的不同，Baseline profile多应用于实时通信领域，Main profile多应用于流媒体领域，High profile则多应用于广电和存储领域。

综上，兼容性较好的MP4格式：
格式 | 值
– | –
编码 | H.264
编码级别 | L4.1以内
帧速 | 25
场序 | 逐行扫描（很关键）
音频解码器 | AAC
采样率，比特率 | 44100Hz，96kbps

直播

knowledge is no pay,reward is kindness
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多
0%